<!DOCTYPE html>
<html lang="cn-ZH" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="UTF-8">
    <title>上传下载界面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .header {
            margin: 0 auto;
            background-image: url("/images/8c2cf013ae50feadee28923a1f9e035289323277.jpg");
            height: 100px;
        }

        .user {
            text-align: center;
            height: 100px;
            line-height: 100px;
        }

        img {
            vertical-align: middle;
        }

        .table1 {
            margin: 0 auto;
            text-align: center;
        }

        table {
            margin: 10px auto;
            border-collapse: collapse;

        }

        table tr th, table tr td {
            padding: 0px 12px;
            font-size: 11px;

        }

        .upload {
            margin-top: 100px;
        }

        table tr td a {
            text-decoration: none;
            margin: 0 5px;
        }


        .a {
            width: 250px;

        }

        .a a {
            display: inline-block;
            height: 50px;
            line-height: 50px;
            width: 65px;
            color: white;
            border-radius: 5px;
            font-size: 14px;
            text-decoration: none;
            background-color: #8D8D8D;
            background-position: center;
        }

        a:hover {
            box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
        }

        table tbody tr:nth-child(odd){
            background-color: beige;
        }

    </style>

</head>

<body>

<div class="table1">
    <!--表格-->
    <table border="1px">
        <thead>
        <tr>
            <th>序号</th>
            <th>文件名字</th>
            <th>文件后缀名</th>
            <th>文件大小</th>
            <th>类型</th>
            <th>是否图片</th>
            <th>上传时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="file,index:${fileList}">
            <td th:text="${(index.index)+1}"></td>
            <td th:text="${file.getName()}"></td>
            <td th:text="${file.getExt()}"></td>
            <td th:text="${file.getSize()}"></td>
            <td th:text="${file.getType()}"></td>
            <td>
                <img style="width: 100px;height: 100px;" th:if="${file.isimg==1}"
                     th:src="'uploadFile/'+${file.getMd5()}+${file.getExt()}">
                <span th:if="${file.isimg!=1}" text="否"></span>
            </td>
            <td th:text="${#calendars.format(file.getUploadTime(),'yyyy年MM月dd号 HH时mm分')}"></td>
            <td class="a">
                <a th:href="@{'/file/dowload/'(id=${file.getId()})}">下载</a>
                <a th:href="@{'/file/delete/'(id=${file.getId()})}">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="upload">
    <form style="text-align: center" action="/file/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" multiple="multiple">
        <input type="submit" value="提交">
    </form>

    <td class="a">
        <a href="/file/publish">一键发布</a>
    </td>
</div>
<script th:inline="javascript">
    var msg = [[${msg}]];
    if (msg != null && msg.length > 0) {
        alert(msg);
    }
</script>
</body>
</html>